
import boxWrapComponent from './index.vue'
import { mkApi } from "../../utils/monkeyTool/monkeyApi"
import { createVNode, h, render, VNode } from 'vue'
let vm:VNode
const bodyHight =   document.documentElement.clientHeight
//1、创造包裹虚拟节点的div元素
const container = document.createElement('div');
const createBoxWarp = (dragBox:HTMLDivElement,component?:any) => {
  if(!component){
    return render(null, container)
  }
  const centerLinePosition = dragBox.offsetTop + dragBox.clientHeight / 2
  const upperPart:Boolean = bodyHight / 2 - centerLinePosition  > 0 ? true : false
  const left:String = dragBox.offsetLeft + "px"
  const width:String = dragBox.offsetWidth + "px"
  const name:string = component.__name
  if(vm){
    render(null, container)
  }
  const props = {
    upperPart,
    top:dragBox.offsetTop + dragBox.offsetHeight + 10 + "px",
    bottom:bodyHight -dragBox.offsetTop + 10 + "px",
    width,
    left,
    name,
    onDestroy: () => {
      render(null, container)
    },
  }
  //2、创造虚拟节点
  vm = createVNode(boxWrapComponent,props,()=>h( component ))
  //3、将虚拟节点创造成真实DOM
  render (vm, container)
  //4、将渲染的结果放到body下
  document.body.appendChild(container.firstElementChild!)  //!表示一定有
}
export default createBoxWarp